<!DOCTYPE html>
<html>
<head>
<title>Thermodynamics Process Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="250"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '36px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Left Box (Initial State) ---
    ctx.strokeRect(40, 40, 220, 130);
    ctx.fillText('210 cm\u00b3', 150, 70);
    ctx.fillText('3.0 x 10\u2075 Pa', 150, 110);
    ctx.fillText('270K', 150, 150);

    // --- Right Box (Final State) ---
    ctx.strokeRect(340, 40, 220, 130);
    ctx.fillText('140 cm\u00b3', 450, 70);
    ctx.fillText('3.0 x 10\u2075 Pa', 450, 110);
    ctx.fillText('T', 450, 150);

    // --- Arrow ---
    ctx.beginPath();
    ctx.moveTo(260, 105);
    ctx.lineTo(340, 105);
    ctx.stroke();
    // Arrowhead
    ctx.beginPath();
    ctx.moveTo(340, 105);
    ctx.lineTo(325, 98);
    ctx.moveTo(340, 105);
    ctx.lineTo(325, 112);
    ctx.stroke();

    // --- Figure Label ---
    ctx.font = 'bold 28px sans-serif';
    ctx.fillText('Fig. 2.1', 300, 215);

</script>
</body>
</html>